<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="运维管理—工单综合管理"></Header>
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="工单号" v-model="orderID"></LInput>
      <LDateTimeSelect2 label="报修时间" style="margin-left: 20px" :value="orderTime" @time-event="getNewTime"></LDateTimeSelect2>
      <LInput label="维修班组" style="margin-left: 20px" v-model="orderBanzu"></LInput>
      <LSelect label="工单状态" style="margin-left: 20px" :value="orderState" :options="option1" @selected-event="getNewSelected"></LSelect>
      <LInput label="关单人" style="margin-left: 20px" v-model="orderCloser"></LInput>
    </section>
    <section class="search_bar">
      <LInput label="执行人" v-model="orderZhixing"></LInput>
      <LInput label="故障位置" style="margin-left: 20px" v-model="orderPostion"></LInput>
      <LButton label="查询" style="margin-left: 16px"></LButton>
      <LButton label="重置" style="margin-left: 16px" @click="clearSelected"></LButton>
      <LButton label="打印" style="margin-left: 16px" @click="printpage"></LButton>
      <LButton label="导出" style="margin-left: 16px" @click="exportExcel"></LButton>
    </section>
    <!-- 表格 -->
    <el-table :data="tableData1" style="width: 100%" border id="table" :default-sort="{prop:'a',order:'ascending'}">
      <el-table-column prop="a" label="工单号" width="180" sortable />
      <el-table-column prop="b" label="工单状态" width="180" />
      <el-table-column prop="c" label="维修班组" />
      <el-table-column label="维修事项" />
      <el-table-column label="报修科室" />
      <el-table-column label="报修时间" sortable />
      <el-table-column label="故障位置" />
      <el-table-column label="故障描述" />
      <el-table-column label="维修备注" />
      <el-table-column label="报修人" />
      <el-table-column label="关单人" />
      <el-table-column label="维修人" />
      <el-table-column label="评价" />
      <el-table-column label="完工时间" sortable />
    </el-table>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";
import LSelect from "@/components/LSelect.vue";
import CsvExportor from "csv-exportor"; //导出csv

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
    LSelect,
  },
  data() {
    return {
      orderID: "",
      orderTime: [],
      orderBanzu: "",
      orderState: "1",
      orderCloser: "",
      orderZhixing: "",
      orderPostion: "",

      option1: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "待受理",
        },
        {
          value: "3",
          label: "待接单",
        },
        {
          value: "4",
          label: "执行中",
        },
        {
          value: "5",
          label: "待关单",
        },
        {
          value: "6",
          label: "已关单",
        },
        {
          value: "7",
          label: "申诉工单",
        },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //日期筛选子传父
    getNewTime(m) {
      this.orderTime = m;
      // console.log("子组件传递的月份1", this.orderTime);
    },
    //下拉框筛选子传父
    getNewSelected(m) {
      this.orderState = m;
    },
    //清空筛选条件
    clearSelected() {
      console.log("点击清空按钮");
      this.orderID = "";
      this.orderTime = [];
      this.orderBanzu = "";
      this.orderState = "1";
      this.orderCloser = "";
      this.orderZhixing = "";
      this.orderPostion = "";
    },
    //打印
    printpage() {
      // var newstr = document.getElementById("table").innerHTML; //得到需要打印的元素HTML
      // var oldstr = document.body.innerHTML; //保存当前页面的HTML
      // document.body.innerHTML = newstr; //把当前页面替换为打印内容HTML
      // window.print(); //执行打印操作
      // document.body.innerHTML = oldstr; //还原当前页面
      // return false;
    },
    //导出
    exportExcel() {
      console.log("11111");
      let tableData = this.tableData1;
      let header = [
        "工单号",
        "工单状态",
        "维修班组",
        "维修事项",
        "报修科室",
        "报修时间",
        "故障位置",
        "故障描述",
        "维修备注",
        "报修人",
        "关单人",
        "维修人",
        "评价",
        "完工时间",
      ];
      CsvExportor.downloadCsv(tableData, { header }, "综合管理.xls");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
</style>

